<template>
	<view :class="[
					'recharge-item',
					{'recharge-item-red-1': isHighlight && item.corner_style == 1 },
					{'recharge-item-red-2': isHighlight && item.corner_style == 2 },
					{'recharge-item-red-3': isHighlight && item.corner_style == 3 },
					{'recharge-item-red-4': isHighlight && item.corner_style == 4 },
				]" @click="createOrder(item,index)">
		<template v-if="item.isVip || item.isFullCatalog">
			<!-- 普通会员 -->
			<view v-if="item.vip_type === 1" class="font-32 font-color" :class="{'color-fff': isHighlight}">
				{{ item.price }}元/{{ item.type !== 4 ? item.duration : '' }}{{ typeText[item.type] }}会员
			</view>
			<!-- 剧集会员 -->
			<view v-else-if="item.vip_type === 2" class="font-32 font-color" :class="{'color-fff': isHighlight}">
				{{ item.price }}元
			</view>
			<view class="font-24 font-color-2 mt-10" style="position: relative; z-index: 2;"
				:class="{'color-fff': isHighlight}">{{ item.note }}
			</view>
			<template v-if="item.corner_marker">
				<view class="tag-panel" :class="{
						'tag-panel-back-1': item.corner_bg_style == 1,
						'tag-panel-back-2': item.corner_bg_style == 2,
						'tag-panel-back-3': item.corner_bg_style == 3,
						'tag-panel-back-4': item.corner_bg_style == 4,
						'tag-panel-back-5': item.corner_bg_style == 5,
						}">
					<!-- <image class="tag-back" :src="vipRechargeBackImage" /> -->
					<view class="tag-small">
						<u-image :src="vipTagIconImage" width="28rpx" height="28rpx" />
						<view class="color-fff font-24 ml-5">{{ item.corner_marker }}</view>
					</view>
				</view>
			</template>
			<view class="vip-big-icon">
				<u-image v-if="vipRechargeIconImage" :src="vipRechargeIconImage" width="124rpx" height="84rpx">
				</u-image>
			</view>
		</template>
		<template v-else-if="!item.isVip">
			<!-- 金币充值 -->
			<view class="font-32 font-color font-bold" :class="{'color-fff': isHighlight}">
				￥{{ item.price }}元</view>
			<view class="font-28 font-color-2 mt-10" :class="{'color-fff': isHighlight}">
				{{ item.note }}
			</view>
			<template v-if="item.note_2">
				<view class="font-28 main-color mt-10" :class="{'color-fff': isHighlight}">
					{{ item.note_2 }}
				</view>
			</template>
			<template v-if="item.corner_marker">
				<view class="tag-panel" :class="{
					'tag-panel-back-1': item.corner_bg_style == 1,
					'tag-panel-back-2': item.corner_bg_style == 2,
					'tag-panel-back-3': item.corner_bg_style == 3,
					'tag-panel-back-4': item.corner_bg_style == 4,
					'tag-panel-back-5': item.corner_bg_style == 5,
					}">
					<!-- <image class="tag-back" :src="vipRechargeBackImage" /> -->
					<view class="tag-small">
						<u-image :src="vipTagIconImage" width="28rpx" height="28rpx" />
						<view class="color-fff font-24 ml-5">{{ item.corner_marker }}</view>
					</view>
				</view>
			</template>
		</template>
	</view>
</template>

<script>
import colorMixins from '@/mixins/colorMixins.js'
import vipRechargeBack1 from '@/static/images/vip-recharge-back-1.png'
import vipRechargeBack2 from '@/static/images/vip-recharge-back-2.png'
import vipRechargeBack3 from '@/static/images/vip-recharge-back-3.png'
import vipRechargeBack4 from '@/static/images/vip-recharge-back-4.png'
import vipRechargeBack5 from '@/static/images/vip-recharge-back-5.png'
import vipRechargeIcon1 from '@/static/images/vip-recharge-icon-1.png'
import vipRechargeIcon2 from '@/static/images/vip-recharge-icon-2.png'
import vipRechargeIcon3 from '@/static/images/vip-recharge-icon-3.png'
import vipRechargeIcon4 from '@/static/images/vip-recharge-icon-4.png'
import vipTagIcon1 from '@/static/images/vip-tag-icon-1.png'
import vipTagIcon2 from '@/static/images/vip-tag-icon-2.png'
import vipTagIcon3 from '@/static/images/vip-tag-icon-3.png'
import vipTagIcon4 from '@/static/images/vip-tag-icon-4.png'
import vipTagIcon5 from '@/static/images/vip-tag-icon-5.png'

export default {
  name: 'RechargeItem',
  mixins: [colorMixins],
  props: {
    item: {
      type: Object,
      default: () => {}
    },
  },
  data() {
    return {
      vipRechargeBack1,
      vipRechargeBack2,
      vipRechargeBack3,
      vipRechargeBack4,
      vipRechargeBack5,
      vipRechargeIcon1,
      vipRechargeIcon2,
      vipRechargeIcon3,
      vipRechargeIcon4,
      vipTagIcon1,
      vipTagIcon2,
      vipTagIcon3,
      vipTagIcon4,
      vipTagIcon5,

      typeText: {
        1: '天',
        2: '月',
        3: '年',
        4: '永久'
      }
    }
  },
  computed: {
    vipRechargeBackImage() {
      const {
        bg_type,
        corner_bg_style
      } = this.$props.item
      const item = {
        1: vipRechargeBack1,
        2: vipRechargeBack2,
        3: vipRechargeBack3,
        4: vipRechargeBack4,
        5: vipRechargeBack5,
      }
      const result = item[corner_bg_style]
      return result
    },
    vipRechargeIconImage() {
      const {
        bg_type,
        corner_style
      } = this.$props.item
      const item = {
        1: vipRechargeIcon1,
        2: vipRechargeIcon2,
        3: vipRechargeIcon3,
        4: vipRechargeIcon4,
      }
      const result = bg_type === 1 ? item[corner_style] : undefined
      return result
    },
    vipTagIconImage() {
      const {
        bg_type,
        corner_bg_style
      } = this.$props.item
      const item = {
        1: vipTagIcon1,
        2: vipTagIcon2,
        3: vipTagIcon3,
        4: vipTagIcon4,
        5: vipTagIcon5,
      }
      const result = item[corner_bg_style]
      return result
    },
    // true高亮
    isHighlight() {
      const { bg_type } = this.$props.item
      return bg_type === 1
    }
  },
  methods: {
    createOrder(item, index) {
      if (item) this.activeItem = item
      this.activeColor = index

      this.$emit('onCreateOrder', item)
    }
  }
}
</script>

<style lang="scss" scoped>
	.recharge-item {
		position: relative;
		margin-bottom: 20rpx;
		background-color: #fff;
		width: 100%;
		border-radius: 16rpx;
		height: 220rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border: 1px solid #FF9F70;

		.lapse-panel {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			opacity: 0.5;
			font-size: 36rpx;
			color: #fff;
			background-color: #000;
			border: 1px solid #000;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 16rpx;
			z-index: 3;
		}
	}

	.recharge-item-red-1 {
		background-image: linear-gradient(to right, #FFB93F, #FF5D01);
		border: 1px solid #fff;
	}

	.recharge-item-red-2 {
		background-image: linear-gradient(to right, rgb(125, 228, 255), rgb(104, 138, 254));
		border: 1px solid #fff;
	}

	.recharge-item-red-3 {
		background-image: linear-gradient(to right, #FFBB65, #FF18E0);
		border: 1px solid #fff;
	}

	.recharge-item-red-4 {
		background-image: linear-gradient(to right, #FFB55A, #FF2980);
		border: 1px solid #fff;
	}

	.recharge-item-active {
		background-color: #b3b3b3;
	}

	.tag-panel {
		position: absolute;
		top: -12rpx;
		left: 0;
		padding-right: 20rpx;
		height: 60rpx;
	}

	.tag-panel-back-1 {
		background-image: url('/static/images/vip-recharge-back-1.png');
		background-size: 100% 100%;
	}

	.tag-panel-back-2 {
		background-image: url('/static/images/vip-recharge-back-2.png');
		background-size: 100% 100%;
	}

	.tag-panel-back-3 {
		background-image: url('/static/images/vip-recharge-back-3.png');
		background-size: 100% 100%;
	}

	.tag-panel-back-4 {
		background-image: url('/static/images/vip-recharge-back-4.png');
		background-size: 100% 100%;
	}

	.tag-panel-back-5 {
		background-image: url('/static/images/vip-recharge-back-5.png');
		background-size: 100% 100%;
	}

	.tag-back {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		width: 160rpx;
		height: 60rpx;
		z-index: 1;
	}

	.tag-small {
		position: relative;
		display: flex;
		align-items: center;
		left: 0;
		top: 0;
		margin-left: 16rpx;
		margin-top: 6rpx;
		z-index: 2;
	}

	.vip-big-icon {
		position: absolute;
		width: 124rpx;
		height: 84rpx;
		bottom: 0;
		right: 0;
		z-index: 1;
	}

	.color-fff {
		color: #ffffff !important;
	}
</style>
